<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
<input id="t1" type="text">
<input id="i1" type="button" value="添加">
<input id="i2" type="button" value="删除">
<input id="i3" type="button" value="复制">


<ul id="u">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#i1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        console.log('v')
        $('#u').append(temp);  在id=u标签内部最后面添加
        //$('#u').prepend(temp);  在id=u标签内部最前面添加
        //$('#u').after(temp);    在id=u标签平级的下面添加
        //$('#u').before(temp);   //在id=u标签平级的上面添加
    })
    $('#i2').click(function () {
        //根据索引来删除
        var v = $('#t1').val();
        $('#u').children().eq(v).remove();
    })
    $('#i3').click(function () {
        var v = $('#t1').val();
        var tag = $('#u').children().eq(v).clone();
        $('#u').append(tag);

    })

</script>

</body>
</html>